| MFPanels / 1.3 / demo / 2 panel.html file last updated : 2023-07-13 |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Methodfish Resizable Panels demo</title>
<link rel="icon" type="image/png" href="https://methodfish.com/images/methodfish.ico">
<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Courier+Prime|Roboto|Material+Icons|Material+Icons+Outlined&display=block">
<script src="../js/mfpanel.js"></script>
<link href="../css/mfpanel.css" rel="stylesheet preload prefetch" as="style">
<style>
.container {
width: 100%;
height: calc(100vh - 3px);
}
.left {
width:50%;
background-color: #f8d4d4;
overflow: auto;
}
.right {
width: 50%;
background-color: lightblue;
}
.left, .right {
float:left;
height:100%;
margin:0;
overflow:auto;
padding:10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="left resizable-e">
Documentation and download files can be found on <a href="http://localhost/methodfish/public_html/Projects/MFPanels">methodfish.com</a> <BR><BR>
Coding requires simply adding the <i>resizable-e</i> class to the divs that sit within a parent container div,
and including the .js and .css files.
<br>
<pre style="background-color:#e1e1e1; overflow:auto; padding:10px;">
<head>
<script src="js/mfpanel.js"></script>
<link href="css/mfpanel.css" rel="stylesheet preload prefetch" as="style">
</head>
<body>
<div class="container">
<div class="left resizable-e">
.
.
</div>
<div class="right resizable-e">
.
.
</div>
</div>
</body>
</pre>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.
</div>
</div>
</body>
</html>Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment